import { tools } from './tools';
import { Random } from 'meteor/random';

Template.channel_tools.onCreated(function () {
  this.tools = new ReactiveVar(tools);
  
  // 1.add files
  // 2.add tool
  // 3.add id-target
  this.tools.get().map((item) => {
    const id = `channel-tool-${Random.id(8)}`;
    item.id = id;
    return item
  });
  // console.log(this.tools.get())
  // 4.if files added, render tools
});

Template.channel_tools.helpers({
  tools: function () {
    return Template.instance().tools.get();
  }
});

Template.channel_tools.events({
  'click .channel-tools-button' (e) {
    const element = $(e.currentTarget);
    const target = element.data('target-panel');

    if (!target || target == '') {
      console.error('must set data-target-panel attribute.')
    }

    if (element.hasClass('active')) {
      element.removeClass('active');
      $(target).addClass('d-none');
    } else {
      $('.channel-tools-btns').find('.channel-tools-button').removeClass('active');
      $('.channel-tools-panel').addClass('d-none');

      element.addClass('active');
      $(target).removeClass('d-none');
    }
  }
});